.navbar {
	height: 50px;
	border-bottom: 0.5px solid rgb(231, 228, 228);
	display: flex;
	align-items: center;
	font-size: 14px;
	color: #555;

	.wrapper {
		width: 100%;
		padding: 20px;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.search {
			display: flex;
			align-items: center;
			border: 0.5px solid lightgray;
			padding: 3px;

			input {
				border: none;
				outline: none;
				background: transparent;

				&::placeholder {
					font-size: 12px;
				}
			}
		}

		.items {
			display: flex;
			align-items: center;

			.item {
				display: flex;
				align-items: center;
				margin: 20px;
				position: relative;
				cursor: pointer;

				.icon {
					font-size: 22px;
				}

				.avatar {
					width: 30px;
					height: 30px;
					border-radius: 50%;
				}

				.counter {
					width: 12px;
					height: 12px;
					background-color: red;
					border-radius: 50%;
					color: white;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 10px;
					font-weight: bold;
					position: absolute;
					top: 0px;
					right: 0px;
				}
			}
		}
	}
}
